<!--
 * @Author: your name
 * @Date: 2021-04-09 10:54:12
 * @LastEditTime: 2021-04-25 16:15:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\lease\lease.vue
-->
<template>
    <div class="lease-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('devWifi.deviceSN')}}</span>
                <el-input v-big v-model="SN" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('salePage.wifiSN')}}</span>
                <el-input v-big v-model="wifiSN" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('device.inverter.inverterType')}}</span>
                <el-select v-model="inverterType" :placeholder="$t('pleaseSelect')" clearable>
                    <el-option
                    v-for="item in textDataList.INVERTER_TYPES"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value"
                    
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('site.siteName')}}</span>
                <el-input  v-model="siteName" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('warrantyManage.userName')}}</span>
                <el-input  v-model="loginName" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('lease.type')}}</span>
                <el-select :disabled="enableFlag=='0'" v-model="leaseMode" :placeholder="$t('pleaseSelect')" :clearable='true' >
                    <el-option
                    v-for="item in offOrOn"
                    :key="item.id"
                    :label="item.text"
                    :value="item.id"
                    clearable>
                    </el-option>
                </el-select>
            </div>

            <div class="search-box-sub">
                <span class="lable-text">{{$t('device.inverter.enableFlag')}}</span>
                <el-select v-model="enableFlag" @change='changeEnableFlag' :placeholder="$t('pleaseSelect')" :clearable='true'>
                    <el-option
                    v-for="item in textDataList.ON_LINE_STATE"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value"
                    clearable>
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('lease.bindStatus')}}</span>
                <el-select v-model="lockedStatus" :disabled="enableFlag=='0'" :placeholder="$t('pleaseSelect')" :clearable='true'>
                    <el-option
                    v-for="item in leaseList"
                    :key="item.id"
                    :label="item.text"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false'>
            <template #enableFlag="{data}">
                <span :style='data.enableFlag==1?"color:#429dff":""'>
                    <i class="iconfont icon-wifi" style="vertical-align: middle;" ></i>
                    {{returnStatus(data.enableFlag)}}
                </span>
            </template>
            <template #leaseMode="{data}">
                {{data.leaseMode?$t('lease.On'):$t('lease.Off')}}
            </template>
            <template #lockedStatus="{data}">
                {{data.lockedStatus?$t('lease.Locked'):$t('lease.Unlocked')}}
            </template>
            <template #option="{data}">
                <div class="option-box">
                    <!-- v-if='data.enableFlag==1' -->
                    <el-button size='small' type="primary" icon="el-icon-setting"   @click='visible = !visible;editData=data' v-if='data.enableFlag==1'  :title="$t('lease.option')" ></el-button>
                </div>
            </template>
            <template #inverterType="{data}">
                {{comm.returnCode(textDataList.INVERTER_TYPES,data.inverterType,'value','code')}}
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <optionModal :visible.sync='visible' :editData='editData' @uploadData='deviceGetPage'></optionModal>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import moment from 'moment'
import optionModal from './option'
export default {
    components: {
        baseTable,
        optionModal
    },
    props: {

    },
    data() {
        return {
            loading:false,
            wifiSN:'',
            dataRows:[],
            editData:{},
            visible:false,
            column:[{
                title: this.$t('devWifi.deviceSN'),
                value: 'SN',
            },
            {
                title: this.$t('salePage.wifiSN'),
                value: 'wifiSN',
                slot: 'wifiSN'
            },
            {
                title: this.$t('device.inverter.inverterType'),
                value: 'inverterType',
                slot: 'inverterType'
            },
            {
                title: this.$t('site.siteName'),
                value: 'siteName',
                slot: 'siteName'
            },
            {
                title: this.$t('warrantyManage.userName'),
                value: 'loginName',
                slot: 'loginName'
            },
            {
                title: this.$t('lease.type'),
                value: 'leaseMode',
                slot: 'leaseMode'
            },
            {
                title: this.$t('device.inverter.enableFlag'),
                value: 'enableFlag',
                slot: 'enableFlag'
            },
            {
                title: this.$t('lease.bindStatus'),
                value: 'lockedStatus',
                slot: 'lockedStatus'
            },{
                title: this.$t('opttask.option'),
                value: 'option',
                slot: 'option',
            }],
            offOrOn:[{
                id:'0',
                text:this.$t('group.noControl')
            },{
                id:'1',
                text:this.$t('group.yesControl')
            }],
            leaseList:[{
                id:'0',
                text:this.$t('lease.Unlocked')
            },{
                id:'1',
                text:this.$t('lease.Locked')
            }],
            size:10,
            total:1,
            current:1,
            SN:'',
            siteName:'',
            loginName:'',
            wifiSN:'',
            enableFlag:'',
            inverterType:'',
            leaseMode:'',
            lockedStatus:'',
            textDataList:{}
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
    },
    methods: {
        changeEnableFlag(){
            if(this.enableFlag == '0'){
                this.leaseMode = ''
                this.lockedStatus = ''
            }
        },
        async getDictionaryBatch(){
            this.loading = true
            let res = await this.API.getDictionaryBatch({
                dictCodes:'ON_LINE_STATE,INVERTER_TYPES,IS_PUBLIC,SALER_TYPE,INTELBARS_INVERTER_TYPES',
                lang:localStorage.getItem('lan') || 'zh_CN'
            })
            this.textDataList = res || {}
            this.loading = false
            this.deviceGetPage()
        },
        returnStatus(flag){
            let code = ''
            if(!this.textDataList){
                return
            }
            this.textDataList.ON_LINE_STATE.forEach(item =>{
                if(item.value == flag){
                    code = item.code
                }
            })
            return code
        },
        async deviceGetPage(){
            this.loading =true
            let res = await this.API.deviceGetPage({
                SN: this.SN,
                siteName: this.siteName,
                loginName: this.loginName,
                wifiSN: this.wifiSN,
                enableFlag: this.enableFlag,
                leaseMode: this.leaseMode,
                inverterType: this.inverterType,
                lockedStatus: this.lockedStatus,
                isSub: 1,
                currentTime: moment().format("YYYY-MM-DD"),
                size:this.size,
                current:this.current
            })
            this.loading =false
            this.dataRows = res.rows
            this.total = res.total
        },
        handleCurrentChange(val) {
          this.current = val
          this.deviceGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.deviceGetPage()
        },
        query(){
            this.current = 1
            this.deviceGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
